<template>
  <el-header style="height: auto">
    <div class="header">
      <div class="header_c">
        <el-row type="flex" align="middle">
          <el-col :span="6">
            <a href="" class="logo"></a>
          </el-col>

          <el-col :span="10" :offset="2"></el-col>

          <el-col :span="6" :offset="3" class="avatar-box" v-show="isLogin">
            <router-link :to="{ name: 'space' }">  <!-- 进入自己的空间则不需要userId -->
              <el-avatar
                style="vertical-align: middle"
                shape="square"
                size="medium"
                :src="userInfo.avatar"
              />
            </router-link>
            <router-link :to="{ name: 'space' }" class="user-name">
              {{ userInfo.name }}
            </router-link>
            <router-link :to="{ name: 'createRecipe' }" class="collection">
              发布菜谱
            </router-link>
            <a href="javascript:;" class="collection" @click="loginOut">退出</a>
          </el-col>

          <el-col :span="6" :offset="3" class="avatar-box" v-show="!isLogin">
            <router-link to="login" class="user-name">登录</router-link>
            <router-link to="register" class="collection">注册</router-link>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="nav-box">
      <div class="nav_c">
        <Menus />
      </div>
    </div>
  </el-header>
</template>

<script>
import Menus from "@/components/menus";
import { mapState, mapGetters } from "vuex";
import store from "@/store";
import { login_out } from "@/service";
export default {
  name: "headers", // 组件唯一id

  components: {
    Menus,
  },

  computed: {
    ...mapGetters(["isLogin"]),
    ...mapState(["userInfo"]),
  },

  methods: {
    /* 退出 */
    loginOut() {
      // 弹框
      this.$confirm("确定退出?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 退出登录接口
          login_out().then((res) => {
            if (res.code === 0) {
              localStorage.removeItem("token");
              store.commit("changeUserInfo", {});

              this.$message({
                type: "success",
                message: "成功退出!",
              });

              this.$router.replace({
                // 跳转至首页
                name: "home",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
};
</script>

<style>
.header {
  height: 130px;
  background: #c90000;
}
.logo {
  display: block;
  height: 130px;
  width: 184px;
  background: url(https://s1.c.meishij.net/n/images/logo2.png) no-repeat -15px 9px;
}
.header_c .nav_c {
  width: 990px;
  margin: 0 auto;
}
.nav_box {
  height: 60px;
  background-color: #fff;
  box-shadow: 10px 0 10px rgba(0, 0, 0, 0.3);
}
.user-name,
.collection {
  margin-left: 5px;
  color: #fff;
}
</style>